<template>
	<div class="page">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-read"></i> 新闻管理
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-button type="success" class="btn-add" icon="el-icon-lx-add" @click="handleAdd">新增</el-button>
			</div>
			<br />
			<el-table :data="tableData" border class="table" ref="multipleTable">
				<el-table-column prop="news_title" label="新闻标题" width="400"></el-table-column>
				<el-table-column prop="iss_user" width="380" label="记者"></el-table-column>
				<el-table-column label="操作" width="480" align="center">
					<template slot-scope="scope">
						<el-button type="success" icon="el-icon-edit" @click="handleGet(scope.$index, scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="sizes, prev, pager, next" :current-page="query.pageIndex" :page-size="10"
				 :page-sizes="[5, 10, 20, 30, 40, 50, 100]" :page-count="pageTotal" @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
			</div>
		</div>
		<el-dialog title="查看" :visible.sync="editVisible" width="80%" :close-on-click-modal="false">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="新闻标题" prop="news_title">
					<el-input v-model="form.news_title"></el-input>
				</el-form-item>
				<el-form-item label="新闻内容" prop="content">
					<!-- <template slot-scope="scope"> -->
					<div>
						<div class="container">
							<mavon-editor v-model="form.content" ref="md" style="min-height: 600px" :toolbarsFlag="true" />
						</div>
					</div>
					<!-- </template> -->
				</el-form-item>
				<el-form-item label="记者" prop="iss_user">
					<el-input v-model="form.iss_user"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 新增弹出框 -->
		<el-dialog title="新增" :visible.sync="addVisible" width="80%" :close-on-click-modal="false">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="新闻标题" prop="news_title">
					<el-input v-model="form.news_title"></el-input>
				</el-form-item>
				<el-form-item label="新闻内容" prop="content">
					<!-- <template slot-scope="scope"> -->
					<div>
						<div class="container">
							<mavon-editor v-model="form.content" ref="md" style="min-height: 600px" :toolbarsFlag="true" />
						</div>
					</div>
					<!-- </template> -->
				</el-form-item>
				<el-form-item label="记者" prop="iss_user">
					<el-input v-model="form.iss_user"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="saveAdd">确 定</el-button>
			</span>
		</el-dialog>
	</div>

</template>

<script>
	import {
		getRequest
	} from "@/api/index";
	import {
		postRequest
	} from "@/api/index";
	import {
		handleUploadImg
	} from '@/utils/upload';
	import {
		mavonEditor
	} from 'mavon-editor'
	import 'mavon-editor/dist/css/index.css'

	export default {
		name: "basetable",
		data() {
			return {
				query: {
					college: {
						college_id: 0,
						college_name: "请选择"
					},
					nature: {
						nature_id: 0,
						nature_name: "请选择"
					},
					major: {
						major_id: 0
					},
					name: "",
					pageIndex: 1,
					pageSize: 10
				},
				tableData: [],
				multipleSelection: [],
				delList: [],
				natures: [],
				colleges: [],
				editVisible: false,
				addVisible: false,
				dialogVisible: false,
				uploadVisible: false,
				pageTotal: 1,
				// 预览图片url
				dialogImageUrl: "",
				// 默认图片url
				fileList: [],
				// 图片上传限制个数
				limitCount: 1,
				form: {
					nature: {
						nature_id: 1
					},
					college: {
						college_id: 1
					}
				},
				idx: -1,
				id: -1,
				rule: {
					course_name: [{
							required: true,
							message: "请输入课程名称",
							trigger: "blur"
						},
						{
							min: 2,
							max: 10,
							message: "长度在 2 到 10 个字符",
							trigger: "blur"
						}
					],
					credit: [{
						required: true,
						message: "请输入课程学分!",
						trigger: "blur"
					}],
					period: [{
						required: true,
						message: "请输入课程学时!",
						trigger: "blur"
					}]
				}
			};
		},
		created() {
			this.getData();
		},
		mounted() {},
		components: {
			mavonEditor
		},
		methods: {
			// 获取 easy-mock 的模拟数据
			getData() {
				getRequest("/public/news/getall", {
					itemsofpage: this.query.pageSize,
					current_page: this.query.pageIndex
				}).then(res => {
					if (res.code == 200) {
						this.tableData = res.data.news;
						this.pageTotal = res.data.total_pages;
					} else {
						this.$message.error("获取新闻信息失败!");
					}
				});
			},
			handleGet(index, row) {
				// this.initForm();
				this.idx = index;
				this.form = JSON.parse(JSON.stringify(row));
				this.editVisible = true;
			},
			handleAdd() {
				this.initForm();
				//   this.fileList = [];
				this.uploadVisible = false;
				this.addVisible = true;
			},
			// 保存新增
			saveAdd() {
				postRequest("/public/news/addnews", this.form).then(res => {
					if (res.code == 200) {
						this.$message.success(`新增新闻成功!`);
						this.getData();
					}
				});
				this.addVisible = false;
			},
			saveEdit(){
				postRequest("/public/news/updatenews", this.form).then(res => {
					if (res.code == 200) {
						this.$message.success(`修改新闻成功!`);
						this.getData();
					}
				});
				this.editVisible = false;
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, "pageIndex", val);
				this.getData();
			},
			//分页 Size
			handleSizeChange(val) {
				this.query.pageSize = val;
				this.getData();
			},
			handleCoverChange(file, fileList) {
				this.uploadVisible = fileList.length >= this.limitCount;
			},
			initForm() {
				this.form = {
					"news_title": '',
					"content": '',
					"iss_user": ''
				};
			},
		}
	};
</script>

<style>
	.hide .el-upload--picture-card {
		display: none;
	}

	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}

	.btn-add {
		float: right;
	}
</style>
